<template>
	<view class="card" @click="handleClick">
		<view>
			<text class="title">{{ detail.chinese }}</text>
			<text class="sub-title">{{ detail.pinyin }}</text>
		</view>
		<view class="content ellipsis">
			{{ detail.definition }}
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed } from "vue";
import type { Thesaurus } from "@/type/index.d";

type Props = {
	data: Thesaurus;
};

const emit = defineEmits<{
	(e: "cst-click", event: MouseEvent): void;
}>();

// 使用 withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(), {
	data: () => ({ chinese: "", pinyin: "", definition: "" }),
});

const detail = computed(() => props.data);
const handleClick = (e: MouseEvent) => {
	emit("cst-click", e);
};
</script>

<style scoped lang="scss">
.card {
	background-color: $uni-text-color-inverse;
	padding: $uni-spacing-col-base;
	.title {
		font-size: 20px;
		font-weight: bold;
		padding: 4px 0;
	}
	.sub-title {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		padding-left: 12px;
	}
	.content {
		font-weight: bold;
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
	}
}
</style>
